<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>gulp学习总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="gulp,">
  

  <meta name="description" content="声明 本教程整理于互联网  一、gulp 入门简介 gulp 是基于 node 实现Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。">
<meta name="keywords" content="gulp">
<meta property="og:type" content="article">
<meta property="og:title" content="gulp学习总结篇">
<meta property="og:url" content="http://blog.poetries.top/2017/01/13/gulp/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="声明 本教程整理于互联网  一、gulp 入门简介 gulp 是基于 node 实现Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://cloud.githubusercontent.com/assets/3949015/7137629/a1def1b8-e2ed-11e4-83e0-5a6adb22de6f.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.910Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="gulp学习总结篇">
<meta name="twitter:description" content="声明 本教程整理于互联网  一、gulp 入门简介 gulp 是基于 node 实现Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。">
<meta name="twitter:image" content="https://cloud.githubusercontent.com/assets/3949015/7137629/a1def1b8-e2ed-11e4-83e0-5a6adb22de6f.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#一、gulp-入门简介"><span class="toc-text">一、gulp 入门简介</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-1-规律"><span class="toc-text">1.1 规律</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-2-编写-gulp-代码"><span class="toc-text">1.2 编写 gulp 代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-3-代码执行结果"><span class="toc-text">1.3 代码执行结果</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#二、安装-Node-和-gulp"><span class="toc-text">二、安装 Node 和 gulp</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-命令行"><span class="toc-text">2.1 命令行</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-终端-Mac"><span class="toc-text">2.2 终端(Mac)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-查看-node-版本号"><span class="toc-text">2.3 查看 node 版本号</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-4-跳转目录"><span class="toc-text">2.4 跳转目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-5-Windows"><span class="toc-text">2.5 Windows</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-6-Mac"><span class="toc-text">2.6 Mac</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-7-退出运行状态"><span class="toc-text">2.7 退出运行状态</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-8-npm-模块管理器"><span class="toc-text">2.8 npm 模块管理器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-9-安装-gulp"><span class="toc-text">2.9 安装 gulp</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#三、使用-gulp-压缩-JS"><span class="toc-text">三、使用 gulp 压缩 JS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-新建一个-gulpfile-js-文件"><span class="toc-text">3.1 新建一个 gulpfile.js 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-在-gulpfile-js-中编写代码"><span class="toc-text">3.2 在 gulpfile.js 中编写代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-获取-gulp-uglify-组件"><span class="toc-text">3.3 获取 gulp-uglify 组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-创建压缩任务"><span class="toc-text">3.4 创建压缩任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-5-跳转至-gulpfile-js-所在目录"><span class="toc-text">3.5 跳转至 gulpfile.js 所在目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-6-使用命令行运行-script-任务"><span class="toc-text">3.6 使用命令行运行 script 任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-7-安装-gulp-uglify-模块"><span class="toc-text">3.7 安装 gulp-uglify 模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-8-编写-js-文件"><span class="toc-text">3.8 编写 js 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-9-检测代码修改自动执行任务"><span class="toc-text">3.9 检测代码修改自动执行任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-10-使用-gulp-task-‘default’-fn-定义默认任务"><span class="toc-text">3.10 使用 gulp.task(‘default’, fn) 定义默认任务</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#四、使用-gulp-压缩-CSS"><span class="toc-text">四、使用 gulp 压缩 CSS</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1-安装-gulp-minify-css模块"><span class="toc-text">4.1 安装 gulp-minify-css模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-参照-使用-gulp-压缩-JS-创建-gulpfile-js-文件编写代码"><span class="toc-text">4.2 参照 [使用 gulp 压缩 JS]创建 gulpfile.js 文件编写代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-创建-css-文件"><span class="toc-text">4.3 创建 css 文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-运行-gulp-查看效果"><span class="toc-text">4.4 运行 gulp 查看效果</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#五、使用-gulp-压缩图片"><span class="toc-text">五、使用 gulp 压缩图片</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-安装-gulp-imagemin-模块"><span class="toc-text">5.1 安装 gulp-imagemin 模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-2-创建-gulpfile-js-文件编写代码"><span class="toc-text">5.2 创建 gulpfile.js 文件编写代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-3-在-images-目录下存放图片"><span class="toc-text">5.3 在 images/ 目录下存放图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-4-运行-gulp-查看效果"><span class="toc-text">5.4 运行 gulp 查看效果</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用-gulp-编译-LESS"><span class="toc-text">使用 gulp 编译 LESS</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安装"><span class="toc-text">安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#基本用法"><span class="toc-text">基本用法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#LESS-代码和编译后的CSS代码"><span class="toc-text">LESS 代码和编译后的CSS代码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#六、使用-gulp-编译-Sass"><span class="toc-text">六、使用 gulp 编译 Sass</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1-gulp-sass"><span class="toc-text">6.1 gulp-sass</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-2-安装"><span class="toc-text">6.2 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-3-基本用法"><span class="toc-text">6.3 基本用法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#七、使用-gulp-构建一个项目"><span class="toc-text">七、使用 gulp 构建一个项目</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1-package-json"><span class="toc-text">7.1 package.json</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2-安装依赖"><span class="toc-text">7.2 安装依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-3-设计目录结构"><span class="toc-text">7.3 设计目录结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-4-让命令行输出的文字带颜色"><span class="toc-text">7.4 让命令行输出的文字带颜色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-5-配置-JS-任务"><span class="toc-text">7.5 配置 JS 任务</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#7-5-1-gulp-uglify"><span class="toc-text">7.5.1 gulp-uglify</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-5-2gulp-watch-path"><span class="toc-text">7.5.2gulp-watch-path</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-5-3-watchPath-event-search-replace-distExt"><span class="toc-text">7.5.3 watchPath(event, search, replace, distExt)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-5-4-stream-combiner2"><span class="toc-text">7.5.4 stream-combiner2</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-5-5-gulp-sourcemaps"><span class="toc-text">7.5.5 gulp-sourcemaps</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-6-配置-CSS-任务"><span class="toc-text">7.6 配置 CSS 任务</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#7-6-1-gulp-minify-css"><span class="toc-text">7.6.1 gulp-minify-css</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#7-6-2-gulp-autoprefixer"><span class="toc-text">7.6.2 gulp-autoprefixer</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-7-配置-Less-任务"><span class="toc-text">7.7 配置 Less 任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-8-配置-Sass-任务"><span class="toc-text">7.8 配置 Sass 任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-9-配置-image-任务"><span class="toc-text">7.9 配置 image 任务</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-10-配置文件复制任务"><span class="toc-text">7.10 配置文件复制任务</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-gulp" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">gulp学习总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2017.01.13</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Build/">Build</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 7.4k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 34分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>声明 本教程整理于互联网</p>
</blockquote>
<h2 id="一、gulp-入门简介"><a href="#一、gulp-入门简介" class="headerlink" title="一、gulp 入门简介"></a>一、gulp 入门简介</h2><hr>
<p><code>gulp</code> 是基于 <code>node</code> 实现<code>Web</code> 前端自动化开发的工具，利用它能够极大的提高开发效率。</p>
<p>在 Web 前端开发工作中有很多“重复工作”，比如压缩<code>CSS/JS</code>文件。而这些工作都是有规律的。找到这些规律，并编写 <code>gulp</code> 配置代码,让 <code>gulp</code> 自动执行这些“重复工作”。</p>
<a id="more"></a>
<ul>
<li>将规律转换为 <code>gulp</code> 代码</li>
</ul>
<ul>
<li>现有目录结构如下：</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">└── js/</span><br><span class="line">    └── a.js</span><br></pre></td></tr></table></figure>
<h3 id="1-1-规律"><a href="#1-1-规律" class="headerlink" title="1.1 规律"></a>1.1 规律</h3><hr>
<ul>
<li>找到 <code>js/</code>目录下的所有 .<code>js</code> 文件</li>
<li>压缩这些 <code>js</code> 文件</li>
<li>将压缩后的代码另存在 <code>dist/js/</code> 目录下</li>
</ul>
<h3 id="1-2-编写-gulp-代码"><a href="#1-2-编写-gulp-代码" class="headerlink" title="1.2 编写 gulp 代码"></a>1.2 编写 <code>gulp</code> 代码</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 压缩 JavaScript 文件</span></span><br><span class="line">gulp.task(<span class="string">'script'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到</span></span><br><span class="line">    gulp.src(<span class="string">'js/*.js'</span>)</span><br><span class="line">    <span class="comment">// 2. 压缩</span></span><br><span class="line">        .pipe(uglify())</span><br><span class="line">    <span class="comment">// 3. 另存</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="1-3-代码执行结果"><a href="#1-3-代码执行结果" class="headerlink" title="1.3 代码执行结果"></a>1.3 代码执行结果</h3><hr>
<p>代码执行后文件结构</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">└── js/</span><br><span class="line">│   └── a.js</span><br><span class="line">└── dist/</span><br><span class="line">    └── js/</span><br><span class="line">        └── a.js</span><br></pre></td></tr></table></figure>
<p>a.js 压缩前<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo (msg) &#123;</span><br><span class="line">    alert(&apos;--------\r\n&apos; + msg + &apos;\r\n--------&apos;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">demo(&apos;Hi&apos;)</span><br></pre></td></tr></table></figure></p>
<p>a.js 压缩后<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">function demo(n)&#123;alert(&quot;--------\r\n&quot;+n+&quot;\r\n--------&quot;)&#125;demo(&quot;Hi&quot;);</span><br></pre></td></tr></table></figure></p>
<p>此时 <code>dist/js</code> 目录下的 <code>.js</code> 文件都是压缩后的版本。</p>
<p>你还可以监控 <code>js/</code> 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它帮助你自动构建 Web 项目。</p>
<hr>
<p><code>gulp</code> 还可以做很多事，例如：</p>
<ol>
<li>压缩<code>CSS</code></li>
<li>压缩图片</li>
<li>编译<code>Sass/LESS</code></li>
<li>编译<code>CoffeeScript</code></li>
<li><code>markdown</code>转换为 <code>html</code></li>
</ol>
<h2 id="二、安装-Node-和-gulp"><a href="#二、安装-Node-和-gulp" class="headerlink" title="二、安装 Node 和 gulp"></a>二、安装 Node 和 gulp</h2><hr>
<p><code>gulp</code> 是基于 <code>node</code> 实现的，那么我们就需要先安装 node。</p>
<blockquote>
<p>Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 Web服务，做类似PHP的事。</p>
</blockquote>
<p>打开 <a href="https://nodejs.org/" target="_blank" rel="noopener">https://nodejs.org/</a> 点击绿色的 <strong>INSTALL</strong> 按钮下载安装 node。</p>
<h3 id="2-1-命令行"><a href="#2-1-命令行" class="headerlink" title="2.1 命令行"></a>2.1 命令行</h3><hr>
<p>在 <code>Windows</code> 中可按 <code>&lt;kbd&gt;</code>徽标键<code>&lt;/kbd&gt;</code>（alt键左边）+ <kbd>R</kbd> 打开输入 <code>cmd</code> + <kbd>Enter</kbd> 打开命令行。</p>
<h3 id="2-2-终端-Mac"><a href="#2-2-终端-Mac" class="headerlink" title="2.2 终端(Mac)"></a>2.2 终端(Mac)</h3><hr>
<p>打开 Launchpad（像火箭一样的图标），在屏幕上方搜索框中输入 <code>终端</code> + <kbd>Enter</kbd> 打开终端。</p>
<h3 id="2-3-查看-node-版本号"><a href="#2-3-查看-node-版本号" class="headerlink" title="2.3 查看 node 版本号"></a>2.3 查看 node 版本号</h3><hr>
<p>在终端/命令行中输入 <code>node -v</code> 检测<code>node</code>是否安装成功，安装成功会显示出<code>node</code> 的版本号。</p>
<h3 id="2-4-跳转目录"><a href="#2-4-跳转目录" class="headerlink" title="2.4 跳转目录"></a>2.4 跳转目录</h3><hr>
<p>终端/命令行 中可使用 <code>cd 目录名</code> 跳转至指定目录，Mac 中还可以使用 <code>ls</code> 查看当前目录下的文件列表。</p>
<h3 id="2-5-Windows"><a href="#2-5-Windows" class="headerlink" title="2.5 Windows"></a>2.5 Windows</h3><hr>
<p><code>Windows</code> 下可使用如下命令跳转至指定目录：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 跳转至 C 盘根目录</span><br><span class="line">cd c:\</span><br><span class="line">// 跳转至当前目录的 demo 文件夹</span><br><span class="line">cd demo</span><br><span class="line">// 跳转至上一级</span><br><span class="line">cd ..</span><br></pre></td></tr></table></figure>
<h3 id="2-6-Mac"><a href="#2-6-Mac" class="headerlink" title="2.6 Mac"></a>2.6 Mac</h3><hr>
<p><code>Mac</code>中建议只在 <code>Documents</code>目录下进行文件操作。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 跳转至文档目录</span><br><span class="line">cd /Users/你的用户名/Documents/</span><br><span class="line">// 或第一次打开终端时直接输入</span><br><span class="line">cd Documents</span><br><span class="line">// 查看目录下文件列表</span><br><span class="line">ls</span><br><span class="line">// 创建文件夹</span><br><span class="line">mkdir demo</span><br><span class="line">// 跳转至当前目录下的 demo 文件夹</span><br><span class="line">cd demo</span><br><span class="line">// 跳转至上级目录</span><br><span class="line">cd ..</span><br></pre></td></tr></table></figure>
<h3 id="2-7-退出运行状态"><a href="#2-7-退出运行状态" class="headerlink" title="2.7 退出运行状态"></a>2.7 退出运行状态</h3><hr>
<p>如果你在命令行中启动了一些一直运行的命令，你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 <code>Ctrl + C</code> 停止 gulp。（Mac 中使用 <code>control + C</code>）</p>
<p>后面的章节中如果代码中存在 <code>gulp.watch</code> 并在命令行运行了 <code>gulp</code> 则需要使用 <code>Ctrl + C</code> 退出任务。</p>
<h3 id="2-8-npm-模块管理器"><a href="#2-8-npm-模块管理器" class="headerlink" title="2.8 npm 模块管理器"></a>2.8 npm 模块管理器</h3><hr>
<p>如果你了解 <code>npm</code> 则跳过此章节</p>
<p>若你不了解npm 请阅读 <a href="http://javascript.ruanyifeng.com/nodejs/npm.html" target="_blank" rel="noopener">npm模块管理器</a></p>
<h3 id="2-9-安装-gulp"><a href="#2-9-安装-gulp" class="headerlink" title="2.9 安装 gulp"></a>2.9 安装 <code>gulp</code></h3><hr>
<p><code>npm</code> 是 node<code></code> 的包管理工具，可以利用它安装 <code>gulp</code> 所需的包。（在安装 <code>node</code> 时已经自动安装了 <code>npm</code>）</p>
<p>在命令行输入</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install -g gulp</span><br></pre></td></tr></table></figure>
<p>若一直没安装成功，请<a href="https://github.com/nimojs/blog/issues/20" target="_blank" rel="noopener">使用 cnpm 安装</a>(npm的国内加速镜像)</p>
<p>意思是：使用 <code>npm</code> 安装全局性的(<code>-g</code>) gulp 包。</p>
<blockquote>
<p>如果你安装失败，请输入<code>sudo npm install -g gulp</code>使用管理员权限安装。（可能会要求输入密码）</p>
</blockquote>
<p>安装时请注意命令行的提示信息，安装完成后可在命令行输入 <code>gulp -v</code> 以确认安装成功。</p>
<p>至此，我们完成了准备工作。接着让 <code>gulp</code>开始帮我们干活吧！</p>
<h2 id="三、使用-gulp-压缩-JS"><a href="#三、使用-gulp-压缩-JS" class="headerlink" title="三、使用 gulp 压缩 JS"></a>三、使用 gulp 压缩 JS</h2><hr>
<p>压缩<code>js</code> 代码可降低 <code>js</code> 文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。</p>
<p>所有的 <code>gulp</code> 代码编写都可以看做是将规律转化为代码的过程。</p>
<ul>
<li><strong>规律</strong></li>
</ul>
<p>找到 <code>js/</code> 目录下的所有<code>js</code> 文件，压缩它们，将压缩后的文件存放在 <code>dist/js/</code> 目录下。</p>
<ul>
<li><code>gulp</code>  代码</li>
</ul>
<p><code>gulp</code>  的所有配置代码都写在 <code>gulpfile.js</code> 文件。</p>
<h3 id="3-1-新建一个-gulpfile-js-文件"><a href="#3-1-新建一个-gulpfile-js-文件" class="headerlink" title="3.1 新建一个 gulpfile.js 文件"></a>3.1 新建一个 <code>gulpfile.js</code> 文件</h3><hr>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">chapter2</span><br><span class="line">└── gulpfile.js</span><br></pre></td></tr></table></figure>
<h3 id="3-2-在-gulpfile-js-中编写代码"><a href="#3-2-在-gulpfile-js-中编写代码" class="headerlink" title="3.2 在 gulpfile.js 中编写代码"></a>3.2 在 <code>gulpfile.js</code> 中编写代码</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>require()</code> 是 node （CommonJS）中获取模块的语法。</p>
<p>在 gulp 中你只需要理解 <code>require()</code> 可以获取模块。</p>
</blockquote>
<hr>
<h3 id="3-3-获取-gulp-uglify-组件"><a href="#3-3-获取-gulp-uglify-组件" class="headerlink" title="3.3 获取 gulp-uglify 组件"></a>3.3 获取 <code>gulp-uglify</code> 组件</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 uglify 模块（用于压缩 JS）</span></span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>)</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-4-创建压缩任务"><a href="#3-4-创建压缩任务" class="headerlink" title="3.4 创建压缩任务"></a>3.4 创建压缩任务</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 压缩 js 文件</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp script 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'script'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到文件</span></span><br><span class="line">    gulp.src(<span class="string">'js/*.js'</span>)</span><br><span class="line">    <span class="comment">// 2. 压缩文件</span></span><br><span class="line">        .pipe(uglify())</span><br><span class="line">    <span class="comment">// 3. 另存压缩后的文件</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li><code>gulp.task(name, fn)</code> - 定义任务，第一个参数是任务名，第二个参数是任务内容。</li>
<li><code>gulp.src(path)</code> - 选择文件，传入参数是文件路径。</li>
<li><code>gulp.dest(path)</code> - 输出文件</li>
<li><code>gulp.pipe()</code> - 管道，你可以暂时将 pipe 理解为将操作加入执行队列</li>
</ul>
<p>参考：<a href="http://www.gulpjs.com.cn/docs/api/" target="_blank" rel="noopener">gulp API文档</a></p>
<hr>
<h3 id="3-5-跳转至-gulpfile-js-所在目录"><a href="#3-5-跳转至-gulpfile-js-所在目录" class="headerlink" title="3.5 跳转至 gulpfile.js 所在目录"></a>3.5 跳转至 <code>gulpfile.js</code> 所在目录</h3><hr>
<p>打开命令行使用 <code>cd</code> 命令跳转至 <code>gulpfile.js</code> 文件所在目录。</p>
<p>例如我的 <code>gulpfile.js</code> 文件保存在 <code>C:\gulp-book\demo\chapter2\gulpfile.js</code>。</p>
<p>那么就需要在命令行输入<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">cd C:\gulp-book\demo\chapter2</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>Mac 用户可使用 <code>cd Documents/gulp-book/demo/chapter2/</code> 跳转</p>
</blockquote>
<hr>
<h3 id="3-6-使用命令行运行-script-任务"><a href="#3-6-使用命令行运行-script-任务" class="headerlink" title="3.6 使用命令行运行 script 任务"></a>3.6 使用命令行运行 script 任务</h3><hr>
<p>在控制台输入 <code>gulp 任务名</code> 可运行任务，此处我们输入 <code>gulp script</code> 回车。</p>
<p>注意：输入 <code>gulp script</code> 后命令行将会提示错误信息<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 在命令行输入</span><br><span class="line">gulp script</span><br><span class="line"></span><br><span class="line">Error: Cannot find module &apos;gulp-uglify&apos;</span><br><span class="line">    at Function.Module._resolveFilename (module.js:338:15)</span><br><span class="line">    at Function.Module._load (module.js:280:25)</span><br></pre></td></tr></table></figure></p>
<p><code>Cannot find module &#39;gulp-uglify&#39;</code> 没有找到 <code>gulp-uglify</code> 模块。</p>
<hr>
<h3 id="3-7-安装-gulp-uglify-模块"><a href="#3-7-安装-gulp-uglify-模块" class="headerlink" title="3.7 安装 gulp-uglify 模块"></a>3.7 安装 <code>gulp-uglify</code> 模块</h3><hr>
<p>因为我们并没有安装 <code>gulp-uglify</code> 模块到本地，所以找不到此模块。</p>
<p>使用 npm 安装 <code>gulp-uglify</code> 到本地</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-uglify</span><br></pre></td></tr></table></figure>
<p>安装成功后你会看到如下信息：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp-uglify@1.1.0 node_modules/gulp-uglify</span><br><span class="line">├── deepmerge@0.2.7</span><br><span class="line">├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)</span><br><span class="line">├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)</span><br><span class="line">├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)</span><br><span class="line">└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)</span><br><span class="line">chapter2 $</span><br></pre></td></tr></table></figure></p>
<p>在你的文件夹中会新增一个 <code>node_modules</code> 文件夹，这里面存放着 npm 安装的模块。</p>
<p>目录结构：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── gulpfile.js</span><br><span class="line">└── node_modules</span><br><span class="line">	└── gulp-uglify</span><br></pre></td></tr></table></figure></p>
<p>接着输入 <code>gulp script</code> 执行任务</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp script</span><br><span class="line">[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js</span><br><span class="line">[13:34:57] Starting &apos;script&apos;...</span><br><span class="line">[13:34:57] Finished &apos;script&apos; after 6.13 ms</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="3-8-编写-js-文件"><a href="#3-8-编写-js-文件" class="headerlink" title="3.8 编写 js 文件"></a>3.8 编写 js 文件</h3><hr>
<p>我们发现 gulp 没有进行任何压缩操作。因为没有js这个目录，也没有 js 目录下的 <code>.js</code> 后缀文件。</p>
<p>创建 <code>a.js</code> 文件，并编写如下内容</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// a.js</span><br><span class="line">function demo (msg) &#123;</span><br><span class="line">    alert(&apos;--------\r\n&apos; + msg + &apos;\r\n--------&apos;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">demo(&apos;Hi&apos;)</span><br></pre></td></tr></table></figure>
<p>目录结构：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── gulpfile.js</span><br><span class="line">├──  js</span><br><span class="line">│	└── a.js</span><br><span class="line">└── node_modules</span><br><span class="line">	└── gulp-uglify</span><br></pre></td></tr></table></figure></p>
<p>接着在命令行输入 <code>gulp script</code> 执行任务</p>
<p>gulp 会在命令行当前目录下创建 <code>dist/js/</code> 文件夹，并创建压缩后的 <code>a.js</code> 文件。</p>
<p>目录结构：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">├── gulpfile.js</span><br><span class="line">├──  js</span><br><span class="line">│	└── a.js</span><br><span class="line">├──  dist</span><br><span class="line">│	└── js</span><br><span class="line">│		└── a.js</span><br><span class="line">└── node_modules</span><br><span class="line">	└── gulp-uglify</span><br></pre></td></tr></table></figure></p>
<p><a href="https://github.com/nimojs/gulp-book/blob/master/demo/chapter2/dist/js/a.js" target="_blank" rel="noopener">dist/js/a.js</a><br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">demo</span>(<span class="params">n</span>)</span>&#123;alert(<span class="string">"--------\r\n"</span>+n+<span class="string">"\r\n--------"</span>)&#125;demo(<span class="string">"Hi"</span>);</span><br></pre></td></tr></table></figure></p>
<hr>
<h3 id="3-9-检测代码修改自动执行任务"><a href="#3-9-检测代码修改自动执行任务" class="headerlink" title="3.9 检测代码修改自动执行任务"></a>3.9 检测代码修改自动执行任务</h3><hr>
<p><code>js/a.js</code>一旦有修改 就必须重新在命令行输入 <code>gulp script</code> ，这很麻烦。</p>
<p>可以使用 <code>gulp.watch(src, fn)</code> 检测指定目录下文件的修改后执行任务。</p>
<p>在 <code>gulpfile.js</code> 中编写如下代码：<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 监听文件修改，当文件被修改则执行 script 任务</span><br><span class="line">gulp.watch(&apos;js/*.js&apos;, [&apos;script&apos;]);</span><br></pre></td></tr></table></figure></p>
<p>但是没有命令可以运行 <code>gulp.watch()</code>，需要将 <code>gulp.watch()</code> 包含在一个任务中。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">// 在命令行使用 gulp auto 启动此任务</span><br><span class="line">gulp.task(&apos;auto&apos;, function () &#123;</span><br><span class="line">    // 监听文件修改，当文件被修改则执行 script 任务</span><br><span class="line">    gulp.watch(&apos;js/*.js&apos;, [&apos;script&apos;])</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>接着在命令行输入 <code>gulp auto</code>，自动监听 <code>js/*.js</code> 文件的修改后压缩js。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">$gulp auto</span><br><span class="line">[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js</span><br><span class="line">[21:09:45] Starting &apos;auto&apos;...</span><br><span class="line">[21:09:45] Finished &apos;auto&apos; after 9.19 ms</span><br></pre></td></tr></table></figure>
<p>此时修改 <code>js/a.js</code> 中的代码并保存。命令行将会出现提示，表示检测到文件修改并压缩文件。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[21:11:01] Starting &apos;script&apos;...</span><br><span class="line">[21:11:01] Finished &apos;script&apos; after 2.85 ms</span><br></pre></td></tr></table></figure>
<p>至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。</p>
<p><strong>注意：</strong>使用 <code>gulp.watch</code> 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通过 <code>Ctrl + C</code> 停止 gulp。</p>
<blockquote>
<p>Mac 下使用 <code>control + C</code> 停止 gulp</p>
</blockquote>
<h3 id="3-10-使用-gulp-task-‘default’-fn-定义默认任务"><a href="#3-10-使用-gulp-task-‘default’-fn-定义默认任务" class="headerlink" title="3.10 使用 gulp.task(‘default’, fn) 定义默认任务"></a>3.10 使用 gulp.task(‘default’, fn) 定义默认任务</h3><hr>
<p>增加如下代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'script'</span>, <span class="string">'auto'</span>]);</span><br></pre></td></tr></table></figure>
<p>此时你可以在命令行直接输入 <code>gulp</code> +回车，运行 <code>script</code> 和 <code>auto</code> 任务。</p>
<p>最终代码如下：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取 uglify 模块（用于压缩 JS）</span></span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 js 文件</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp script 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'script'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到文件</span></span><br><span class="line">    gulp.src(<span class="string">'js/*.js'</span>)</span><br><span class="line">    <span class="comment">// 2. 压缩文件</span></span><br><span class="line">        .pipe(uglify())</span><br><span class="line">    <span class="comment">// 3. 另存压缩后的文件</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在命令行使用 gulp auto 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'auto'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 监听文件修改，当文件被修改则执行 script 任务</span></span><br><span class="line">    gulp.watch(<span class="string">'js/*.js'</span>, [<span class="string">'script'</span>])</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 gulp.task('default') 定义默认任务</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp 启动 script 任务和 auto 任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'script'</span>, <span class="string">'auto'</span>])</span><br></pre></td></tr></table></figure>
<p>去除注释后，你会发现只需要 11 行代码就可以让 gulp 自动监听 js 文件的修改后压缩代码。但是还有还有一些性能问题和缺少容错性，将在后面的章节详细说明。</p>
<p>你可以访问 <a href="https://github.com/terinjokes/gulp-uglify" target="_blank" rel="noopener">gulp-uglify</a> 以查看更多用法。</p>
<h2 id="四、使用-gulp-压缩-CSS"><a href="#四、使用-gulp-压缩-CSS" class="headerlink" title="四、使用 gulp 压缩 CSS"></a>四、使用 gulp 压缩 CSS</h2><hr>
<p>压缩 css 代码可降低 css 文件大小，提高页面打开速度。</p>
<p>我们接着将规律转换为 gulp 代码</p>
<ul>
<li><strong>规律</strong></li>
</ul>
<p>找到 <code>css/</code> 目录下的所有 css 文件，压缩它们，将压缩后的文件存放在 <code>dist/css/</code> 目录下。</p>
<h3 id="4-1-安装-gulp-minify-css模块"><a href="#4-1-安装-gulp-minify-css模块" class="headerlink" title="4.1 安装 gulp-minify-css模块"></a>4.1 安装 gulp-minify-css模块</h3><hr>
<p>提示：你需要使用命令行的 <code>cd</code> 切换到对应目录后进行安装操作。</p>
<p>在命令行输入</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-minify-css</span><br></pre></td></tr></table></figure>
<p>安装成功后你会看到如下信息：(安装时间可能会比较长)</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp-minify-css@1.0.0 node_modules/gulp-minify-css</span><br><span class="line">├── object-assign@2.0.0</span><br><span class="line">├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)</span><br><span class="line">├── clean-css@3.1.8 (commander@2.6.0, source-map@0.1.43)</span><br><span class="line">├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)</span><br><span class="line">├── vinyl-bufferstream@1.0.1 (bufferstreams@1.0.1)</span><br><span class="line">└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, multipipe@0.1.2, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.3.2, dateformat@1.0.11)</span><br></pre></td></tr></table></figure>
<h3 id="4-2-参照-使用-gulp-压缩-JS-创建-gulpfile-js-文件编写代码"><a href="#4-2-参照-使用-gulp-压缩-JS-创建-gulpfile-js-文件编写代码" class="headerlink" title="4.2 参照 [使用 gulp 压缩 JS]创建 gulpfile.js 文件编写代码"></a>4.2 参照 [使用 gulp 压缩 JS]创建 <code>gulpfile.js</code> 文件编写代码</h3><hr>
<p>在对应目录创建 <code>gulpfile.js</code> 文件并写入如下内容：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取 minify-css 模块（用于压缩 CSS）</span></span><br><span class="line"><span class="keyword">var</span> minifyCSS = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 css 文件</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp css 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'css'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到文件</span></span><br><span class="line">    gulp.src(<span class="string">'css/*.css'</span>)</span><br><span class="line">    <span class="comment">// 2. 压缩文件</span></span><br><span class="line">        .pipe(minifyCSS())</span><br><span class="line">    <span class="comment">// 3. 另存为压缩文件</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/css'</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在命令行使用 gulp auto 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'auto'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 监听文件修改，当文件被修改则执行 css 任务</span></span><br><span class="line">    gulp.watch(<span class="string">'css/*.css'</span>, [<span class="string">'css'</span>])</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 gulp.task('default') 定义默认任务</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp 启动 css 任务和 auto 任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'css'</span>, <span class="string">'auto'</span>])</span><br></pre></td></tr></table></figure>
<p>你可以访问 <a href="https://github.com/jonathanepollack/gulp-minify-css" target="_blank" rel="noopener">gulp-minify-css</a> 以查看更多用法。</p>
<hr>
<h3 id="4-3-创建-css-文件"><a href="#4-3-创建-css-文件" class="headerlink" title="4.3 创建 css 文件"></a>4.3 创建 css 文件</h3><hr>
<p>在 <code>gulpfile.js</code> 对应目录创建 <code>css</code> 文件夹，并在 <code>css/</code> 目录下创建 <code>a.css</code> 文件。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* a.css */</span></span><br><span class="line"><span class="selector-tag">body</span> <span class="selector-tag">a</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:pink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="4-4-运行-gulp-查看效果"><a href="#4-4-运行-gulp-查看效果" class="headerlink" title="4.4 运行 gulp 查看效果"></a>4.4 运行 gulp 查看效果</h3><hr>
<p>在命令行输入 <code>gulp</code> +回车</p>
<p>你将看到命令行出现如下提示</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp</span><br><span class="line">[17:01:19] Using gulpfile ~/Documents/code/gulp-book/demo/chapter3/gulpfile.js</span><br><span class="line">[17:01:19] Starting &apos;css&apos;...</span><br><span class="line">[17:01:19] Finished &apos;css&apos; after 6.21 ms</span><br><span class="line">[17:01:19] Starting &apos;auto&apos;...</span><br><span class="line">[17:01:19] Finished &apos;auto&apos; after 5.42 ms</span><br><span class="line">[17:01:19] Starting &apos;default&apos;...</span><br><span class="line">[17:01:19] Finished &apos;default&apos; after 5.71 μs</span><br></pre></td></tr></table></figure>
<p>gulp 会创建 <code>dist/css</code> 目录，并创建 <code>a.css</code> 文件，此文件存放压缩后的 css 代码。<br><a href="https://github.com/nimojs/gulp-book/blob/master/demo/chapter3/dist/css/a.css" target="_blank" rel="noopener">dist/css/a.css</a></p>
<h2 id="五、使用-gulp-压缩图片"><a href="#五、使用-gulp-压缩图片" class="headerlink" title="五、使用 gulp 压缩图片"></a>五、使用 gulp 压缩图片</h2><hr>
<p>压缩 图片文件可降低文件大小，提高图片加载速度。</p>
<p>找到规律转换为 gulp 代码</p>
<ul>
<li><strong>规律</strong></li>
</ul>
<p>找到 <code>images/</code> 目录下的所有文件，压缩它们，将压缩后的文件存放在 <code>dist/images/</code> 目录下。</p>
<h3 id="5-1-安装-gulp-imagemin-模块"><a href="#5-1-安装-gulp-imagemin-模块" class="headerlink" title="5.1 安装 gulp-imagemin 模块"></a>5.1 安装 gulp-imagemin 模块</h3><hr>
<p>提示：你需要使用命令行的 <code>cd</code> 切换至对应目录再进行安装操作和 gulp 启动操作。</p>
<p>在命令行输入</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-imagemin</span><br></pre></td></tr></table></figure>
<p>安装成功后你会看到如下信息：(安装时间可能会比较长)</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp-imagemin@2.2.1 node_modules/gulp-imagemin</span><br><span class="line">├── object-assign@2.0.0</span><br><span class="line">├── pretty-bytes@1.0.3 (get-stdin@4.0.1)</span><br><span class="line">├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, has-ansi@1.0.3, strip-ansi@2.0.1)</span><br><span class="line">├── through2-concurrent@0.3.1 (through2@0.6.3)</span><br><span class="line">├── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, vinyl@0.4.6, through2@0.6.3, multipipe@0.1.2, lodash.template@3.3.2, dateformat@1.0.11)</span><br><span class="line">└── imagemin@3.1.0 (get-stdin@3.0.2, optional@0.1.3, vinyl@0.4.6, through2@0.6.3, stream-combiner@0.2.1, concat-stream@1.4.7, meow@2.1.0, vinyl-fs@0.3.13, imagemin-svgo@4.1.2, imagemin-optipng@4.2.0, imagemin-jpegtran@4.1.0, imagemin-pngquant@4.0.0, imagemin-gifsicle@4.1.0)</span><br></pre></td></tr></table></figure>
<h3 id="5-2-创建-gulpfile-js-文件编写代码"><a href="#5-2-创建-gulpfile-js-文件编写代码" class="headerlink" title="5.2 创建 gulpfile.js 文件编写代码"></a>5.2 创建 <code>gulpfile.js</code> 文件编写代码</h3><hr>
<p>在对应目录创建 <code>gulpfile.js</code> 文件并写入如下内容：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取 gulp-imagemin 模块</span></span><br><span class="line"><span class="keyword">var</span> imagemin = <span class="built_in">require</span>(<span class="string">'gulp-imagemin'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩图片任务</span></span><br><span class="line"><span class="comment">// 在命令行输入 gulp images 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'images'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到图片</span></span><br><span class="line">    gulp.src(<span class="string">'images/*.*'</span>)</span><br><span class="line">    <span class="comment">// 2. 压缩图片</span></span><br><span class="line">        .pipe(imagemin(&#123;</span><br><span class="line">            progressive: <span class="literal">true</span></span><br><span class="line">        &#125;))</span><br><span class="line">    <span class="comment">// 3. 另存图片</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/images'</span>))</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在命令行使用 gulp auto 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'auto'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 监听文件修改，当文件被修改则执行 images 任务</span></span><br><span class="line">    gulp.watch(<span class="string">'images/*.*)'</span>, [<span class="string">'images'</span>])</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 gulp.task('default') 定义默认任务</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp 启动 images 任务和 auto 任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'images'</span>, <span class="string">'auto'</span>])</span><br></pre></td></tr></table></figure>
<p>你可以访问 <a href="https://github.com/sindresorhus/gulp-imagemin" target="_blank" rel="noopener">gulp-imagemin</a> 以查看更多用法。</p>
<hr>
<h3 id="5-3-在-images-目录下存放图片"><a href="#5-3-在-images-目录下存放图片" class="headerlink" title="5.3 在 images/ 目录下存放图片"></a>5.3 在 <code>images/</code> 目录下存放图片</h3><hr>
<p>在 <code>gulpfile.js</code> 对应目录创建 <code>images</code> 文件夹，并在 <code>images/</code> 目录下存放图片。</p>
<h3 id="5-4-运行-gulp-查看效果"><a href="#5-4-运行-gulp-查看效果" class="headerlink" title="5.4 运行 gulp 查看效果"></a>5.4 运行 gulp 查看效果</h3><hr>
<p>在命令行输入 <code>gulp</code> +回车</p>
<p>你将看到命令行出现如下提示</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">gulp</span><br><span class="line">[18:10:42] Using gulpfile ~/Documents/code/gulp-book/demo/chapter4/gulpfile.js</span><br><span class="line">[18:10:42] Starting &apos;images&apos;...</span><br><span class="line">[18:10:42] Finished &apos;images&apos; after 5.72 ms</span><br><span class="line">[18:10:42] Starting &apos;auto&apos;...</span><br><span class="line">[18:10:42] Finished &apos;auto&apos; after 6.39 ms</span><br><span class="line">[18:10:42] Starting &apos;default&apos;...</span><br><span class="line">[18:10:42] Finished &apos;default&apos; after 5.91 μs</span><br><span class="line">[18:10:42] gulp-imagemin: Minified 3 images (saved 25.83 kB - 5.2%)</span><br></pre></td></tr></table></figure>
<h2 id="使用-gulp-编译-LESS"><a href="#使用-gulp-编译-LESS" class="headerlink" title="使用 gulp 编译 LESS"></a>使用 gulp 编译 LESS</h2><blockquote>
<p>Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。</p>
</blockquote>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-less</span><br></pre></td></tr></table></figure>
<h2 id="基本用法"><a href="#基本用法" class="headerlink" title="基本用法"></a>基本用法</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br><span class="line"><span class="comment">// 获取 gulp-less 模块</span></span><br><span class="line"><span class="keyword">var</span> less = <span class="built_in">require</span>(<span class="string">'gulp-less'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编译less</span></span><br><span class="line"><span class="comment">// 在命令行输入 gulp less 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'less'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 1. 找到 less 文件</span></span><br><span class="line">    gulp.src(<span class="string">'less/**.less'</span>)</span><br><span class="line">    <span class="comment">// 2. 编译为css</span></span><br><span class="line">        .pipe(less())</span><br><span class="line">    <span class="comment">// 3. 另存文件</span></span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/css'</span>))</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在命令行使用 gulp auto 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'auto'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 监听文件修改，当文件被修改则执行 less 任务</span></span><br><span class="line">    gulp.watch(<span class="string">'less/**.less'</span>, [<span class="string">'less'</span>])</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 gulp.task('default') 定义默认任务</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp 启动 less 任务和 auto 任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'less'</span>, <span class="string">'auto'</span>])</span><br></pre></td></tr></table></figure>
<p>你可以访问 <a href="https://github.com/plus3network/gulp-less" target="_blank" rel="noopener">gulp-less</a> 以查看更多用法。</p>
<h2 id="LESS-代码和编译后的CSS代码"><a href="#LESS-代码和编译后的CSS代码" class="headerlink" title="LESS 代码和编译后的CSS代码"></a>LESS 代码和编译后的CSS代码</h2><p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter5/less/a.less" target="_blank" rel="noopener">less/a.less</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.less</span>&#123;</span><br><span class="line">	a&#123;</span><br><span class="line">        <span class="selector-tag">color</span><span class="selector-pseudo">:pink</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter5/less/import.less" target="_blank" rel="noopener">less/import.less</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">"a.less"</span>;</span><br><span class="line"><span class="selector-class">.import</span>&#123;</span><br><span class="line">	a&#123;</span><br><span class="line">		<span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter5/dist/css/a.css" target="_blank" rel="noopener">less/a.css</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.less</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter5/dist/css/import.css" target="_blank" rel="noopener">less/import.css</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.less</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.import</span> <span class="selector-tag">a</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="六、使用-gulp-编译-Sass"><a href="#六、使用-gulp-编译-Sass" class="headerlink" title="六、使用 gulp 编译 Sass"></a>六、使用 gulp 编译 Sass</h2><hr>
<blockquote>
<p>无论是 <code>node-sass</code> 还是 <code>ruby-sass</code> 使用 npm 安装都非常的慢，甚至会装不上。及其不利于团队协作。建议使用 less 作为 css 预处理器。<br>如果因为 less 不支持自定义函数选择用 sass 可以使用 <a href="https://github.com/seven-phases-max/less-plugin-functions" target="_blank" rel="noopener">less-plugin-functions</a> 让 less 支持自定义函数。</p>
</blockquote>
<h3 id="6-1-gulp-sass"><a href="#6-1-gulp-sass" class="headerlink" title="6.1 gulp-sass"></a>6.1 gulp-sass</h3><hr>
<p>本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢，建议使用 <a href="https://github.com/dlmanning/gulp-sass" target="_blank" rel="noopener">gulp-sass</a></p>
<blockquote>
<p>Sass 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了开发者的时间，使得 CSS 的开发，变得简单和可维护。</p>
</blockquote>
<p>本章使用 <code>ruby-sass</code> 编译 css,若你没有安装 ruby 和 sass 请移步 <a href="https://github.com/nimojs/blog/issues/14" target="_blank" rel="noopener">使用ruby.taobao安装 Sass</a></p>
<h3 id="6-2-安装"><a href="#6-2-安装" class="headerlink" title="6.2 安装"></a>6.2 安装</h3><hr>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-ruby-sass</span><br></pre></td></tr></table></figure>
<h3 id="6-3-基本用法"><a href="#6-3-基本用法" class="headerlink" title="6.3 基本用法"></a>6.3 基本用法</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 获取 gulp</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br><span class="line"><span class="comment">// 获取 gulp-ruby-sass 模块</span></span><br><span class="line"><span class="keyword">var</span> sass = <span class="built_in">require</span>(<span class="string">'gulp-ruby-sass'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编译sass</span></span><br><span class="line"><span class="comment">// 在命令行输入 gulp sass 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'sass'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> sass(<span class="string">'sass/'</span>) </span><br><span class="line">    .on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.error(<span class="string">'Error!'</span>, err.message);</span><br><span class="line">   &#125;)</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'dist/css'</span>))</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在命令行使用 gulp auto 启动此任务</span></span><br><span class="line">gulp.task(<span class="string">'auto'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 监听文件修改，当文件被修改则执行 images 任务</span></span><br><span class="line">    gulp.watch(<span class="string">'sass/**/*.scss'</span>, [<span class="string">'sass'</span>])</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 gulp.task('default') 定义默认任务</span></span><br><span class="line"><span class="comment">// 在命令行使用 gulp 启动 sass 任务和 auto 任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'sass'</span>, <span class="string">'auto'</span>])</span><br></pre></td></tr></table></figure>
<p>Sass 代码和编译后的 CSS 代码</p>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/sass/a.scss" target="_blank" rel="noopener">sass/a.scss</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.sass</span>&#123;</span><br><span class="line">	a&#123;</span><br><span class="line">        <span class="selector-tag">color</span><span class="selector-pseudo">:pink</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/sass/import.scss" target="_blank" rel="noopener">sass/import.scss</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@import</span> <span class="string">"a.scss"</span>;</span><br><span class="line"><span class="selector-class">.import</span>&#123;</span><br><span class="line">	a&#123;</span><br><span class="line">		<span class="selector-tag">color</span><span class="selector-pseudo">:red</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/dist/css/a.css" target="_blank" rel="noopener">sass/a.css</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.sass</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter6/dist/css/import.css" target="_blank" rel="noopener">sass/import.css</a></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.sass</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.import</span> <span class="selector-tag">a</span>&#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="七、使用-gulp-构建一个项目"><a href="#七、使用-gulp-构建一个项目" class="headerlink" title="七、使用 gulp 构建一个项目"></a>七、使用 gulp 构建一个项目</h2><hr>
<p>本章将介绍</p>
<ul>
<li><a href="https://github.com/nimojs/gulp-watch-path" target="_blank" rel="noopener">gulp-watch-path</a></li>
<li><a href="https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md" target="_blank" rel="noopener">stream-combiner2</a></li>
<li><a href="https://github.com/floridoo/gulp-sourcemaps" target="_blank" rel="noopener">gulp-sourcemaps</a></li>
<li><a href="https://github.com/sindresorhus/gulp-autoprefixer/blob/master/package.json" target="_blank" rel="noopener">gulp-autoprefixer</a></li>
</ul>
<p>并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码。</p>
<p>若你不了解npm 请务必阅读 <a href="http://javascript.ruanyifeng.com/nodejs/npm.html" target="_blank" rel="noopener">npm模块管理器</a></p>
<h3 id="7-1-package-json"><a href="#7-1-package-json" class="headerlink" title="7.1 package.json"></a>7.1 package.json</h3><hr>
<p>如果你熟悉 npm 则可以利用 <code>package.json</code> 保存所有 <code>npm install --save-dev gulp-xxx</code> 模块依赖和模块版本。</p>
<p>在命令行输入</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
<p>会依次要求补全项目信息，不清楚的可以直接回车跳过<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">name: (gulp-demo) </span><br><span class="line">version: (1.0.0) </span><br><span class="line">description: </span><br><span class="line">entry point: (index.js) </span><br><span class="line">test command: </span><br><span class="line">...</span><br><span class="line">...</span><br><span class="line">Is this ok? (yes)</span><br></pre></td></tr></table></figure></p>
<p>最终会在当前目录中创建 <code>package.json</code> 文件并生成类似如下代码：<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"name"</span>: <span class="string">"gulp-demo"</span>,</span><br><span class="line">  <span class="string">"version"</span>: <span class="string">"0.0.0"</span>,</span><br><span class="line">  <span class="string">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"repository"</span>: &#123;</span><br><span class="line">    <span class="string">"type"</span>: <span class="string">"git"</span>,</span><br><span class="line">    <span class="string">"url"</span>: <span class="string">"https://github.com/nimojs/gulp-demo.git"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"keywords"</span>: [</span><br><span class="line">    <span class="string">"gulp"</span>,</span><br><span class="line">  ],</span><br><span class="line">  <span class="string">"author"</span>: <span class="string">"nimojs &lt;nimo.jser@gmail.com&gt;"</span>,</span><br><span class="line">  <span class="string">"license"</span>: <span class="string">"MIT"</span>,</span><br><span class="line">  <span class="string">"bugs"</span>: &#123;</span><br><span class="line">    <span class="string">"url"</span>: <span class="string">"https://github.com/nimojs/gulp-demo/issues"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"homepage"</span>: <span class="string">"https://github.com/nimojs/gulp-demo"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="7-2-安装依赖"><a href="#7-2-安装依赖" class="headerlink" title="7.2 安装依赖"></a>7.2 安装依赖</h3><hr>
<p>安装 gulp 到项目（防止全局 gulp 升级后与此项目 <code>gulpfile.js</code> 代码不兼容）<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp --save-dev</span><br></pre></td></tr></table></figure></p>
<p>此时打开 <code>package.json</code> 会发现多了如下代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="string">"devDependencies"</span>: &#123;</span><br><span class="line">	<span class="string">"gulp"</span>: <span class="string">"^3.8.11"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>声明此项目的开发依赖 gulp</p>
<p>接着安装其他依赖：</p>
<blockquote>
<p>安装模块较多，请耐心等待，若一直安装失败可使用<a href="http://npm.taobao.org/" target="_blank" rel="noopener">npm.taobao.org</a></p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install gulp-uglify gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less gulp-ruby-sass gulp-imagemin gulp-util --save-dev</span><br></pre></td></tr></table></figure>
<p>此时，<a href="https://github.com/nimojs/gulp-demo/blob/master/package.json" target="_blank" rel="noopener">package.json</a> 将会更新<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="string">"devDependencies"</span>: &#123;</span><br><span class="line">    <span class="string">"colors"</span>: <span class="string">"^1.0.3"</span>,</span><br><span class="line">    <span class="string">"gulp"</span>: <span class="string">"^3.8.11"</span>,</span><br><span class="line">    <span class="string">"gulp-autoprefixer"</span>: <span class="string">"^2.1.0"</span>,</span><br><span class="line">    <span class="string">"gulp-imagemin"</span>: <span class="string">"^2.2.1"</span>,</span><br><span class="line">    <span class="string">"gulp-less"</span>: <span class="string">"^3.0.2"</span>,</span><br><span class="line">    <span class="string">"gulp-minify-css"</span>: <span class="string">"^1.0.0"</span>,</span><br><span class="line">    <span class="string">"gulp-ruby-sass"</span>: <span class="string">"^1.0.1"</span>,</span><br><span class="line">    <span class="string">"gulp-sourcemaps"</span>: <span class="string">"^1.5.1"</span>,</span><br><span class="line">    <span class="string">"gulp-uglify"</span>: <span class="string">"^1.1.0"</span>,</span><br><span class="line">    <span class="string">"gulp-watch-path"</span>: <span class="string">"^0.0.7"</span>,</span><br><span class="line">    <span class="string">"stream-combiner2"</span>: <span class="string">"^1.0.2"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>当你将这份 gulpfile.js 配置分享给你的朋友时，就不需要将 <code>node_modules/</code> 发送给他，他只需在命令行输入<br><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure></p>
<p>就可以检测 <code>package.json</code> 中的 <code>devDependencies</code> 并安装所有依赖。</p>
<h3 id="7-3-设计目录结构"><a href="#7-3-设计目录结构" class="headerlink" title="7.3 设计目录结构"></a>7.3 设计目录结构</h3><hr>
<p>我们将文件分为2类，一类是源码，一类是编译压缩后的版本。文件夹分别为 <code>src</code> 和 <code>dist</code>。(注意区分 <code>dist</code> 和 ·<code>dest</code> 的区别)</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">└── src/</span><br><span class="line">│</span><br><span class="line">└── dist/</span><br></pre></td></tr></table></figure>
<p><code>dist/</code> 目录下的文件都是根据 <code>src/</code> 下所有源码文件构建而成。</p>
<p>在 <code>src/</code> 下创建前端资源对应的的文件夹</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">└── src/</span><br><span class="line">	├── less/    *.less 文件</span><br><span class="line">	├── sass/    *.scss *.sass 文件</span><br><span class="line">	├── css/     *.css  文件</span><br><span class="line">	├── js/      *.js 文件</span><br><span class="line">	├── fonts/   字体文件</span><br><span class="line">    └── images/   图片</span><br><span class="line">└── dist/</span><br></pre></td></tr></table></figure>
<h3 id="7-4-让命令行输出的文字带颜色"><a href="#7-4-让命令行输出的文字带颜色" class="headerlink" title="7.4 让命令行输出的文字带颜色"></a>7.4 让命令行输出的文字带颜色</h3><hr>
<p>gulp 自带的输出都带时间和颜色，这样很容易识别。我们利用 <a href="https://github.com/gulpjs/gulp-util" target="_blank" rel="noopener">gulp-util</a> 实现同样的效果。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>)</span><br><span class="line"><span class="keyword">var</span> gutil = <span class="built_in">require</span>(<span class="string">'gulp-util'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gutil.log(<span class="string">'message'</span>)</span><br><span class="line">    gutil.log(gutil.colors.red(<span class="string">'error'</span>))</span><br><span class="line">    gutil.log(gutil.colors.green(<span class="string">'message:'</span>) + <span class="string">"some"</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>使用 <code>gulp</code> 启动默认任务以测试<br><img src="https://cloud.githubusercontent.com/assets/3949015/7137629/a1def1b8-e2ed-11e4-83e0-5a6adb22de6f.png" alt="gulp-util"></p>
<h3 id="7-5-配置-JS-任务"><a href="#7-5-配置-JS-任务" class="headerlink" title="7.5 配置 JS 任务"></a>7.5 配置 JS 任务</h3><h4 id="7-5-1-gulp-uglify"><a href="#7-5-1-gulp-uglify" class="headerlink" title="7.5.1 gulp-uglify"></a>7.5.1 gulp-uglify</h4><p>检测<code>src/js/</code>目录下的 js 文件修改后，压缩 <code>js/</code> 中所有 js 文件并输出到 <code>dist/js/</code> 中</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'uglifyjs'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.src(<span class="string">'src/js/**/*.js'</span>)</span><br><span class="line">        .pipe(uglify())</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/js/**/*.js'</span>, [<span class="string">'uglifyjs'</span>])</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><code>src/js/**/*.js</code> 是 glob 语法。<a href="http://baike.baidu.com/view/4019153.htm" target="_blank" rel="noopener">百度百科：glob模式</a> 、<a href="https://github.com/isaacs/node-glob" target="_blank" rel="noopener">node-glob</a></p>
<p>在命令行输入 <code>gulp</code> 后会出现如下消息，表示已经启动。<br><figure class="highlight ruby"><table><tr><td class="code"><pre><span class="line">[<span class="number">20</span><span class="symbol">:</span><span class="number">39</span><span class="symbol">:</span><span class="number">50</span>] Using gulpfile ~<span class="regexp">/Documents/code</span><span class="regexp">/gulp-book/demo</span><span class="regexp">/chapter7/gulpfile</span>.js</span><br><span class="line">[<span class="number">20</span><span class="symbol">:</span><span class="number">39</span><span class="symbol">:</span><span class="number">50</span>] Starting <span class="string">'default'</span>...</span><br><span class="line">[<span class="number">20</span><span class="symbol">:</span><span class="number">39</span><span class="symbol">:</span><span class="number">50</span>] Finished <span class="string">'default'</span> after <span class="number">13</span> ms</span><br></pre></td></tr></table></figure></p>
<p>此时编辑 <a href="https://github.com/nimojs/gulp-demo/blob/master/src/js/log.js" target="_blank" rel="noopener">src/js/log.js</a> 文件并保存，命令行会出现如下消息，表示检测到 <code>src/js/**/*.js</code> 文件修改后重新编译所有 js。</p>
<figure class="highlight ruby"><table><tr><td class="code"><pre><span class="line">[<span class="number">20</span><span class="symbol">:</span><span class="number">39</span><span class="symbol">:</span><span class="number">52</span>] Starting <span class="string">'js'</span>...</span><br><span class="line">[<span class="number">20</span><span class="symbol">:</span><span class="number">39</span><span class="symbol">:</span><span class="number">52</span>] Finished <span class="string">'js'</span> after <span class="number">14</span> ms</span><br></pre></td></tr></table></figure>
<h4 id="7-5-2gulp-watch-path"><a href="#7-5-2gulp-watch-path" class="headerlink" title="7.5.2gulp-watch-path"></a>7.5.2gulp-watch-path</h4><hr>
<p>此配置有个性能问题，当 <code>gulp.watch</code> 检测到  <code>src/js/</code> 目录下的js文件有修改时会将所有文件全部编译。实际上我们只需要重新编译被修改的文件。</p>
<p>简单介绍 <code>gulp.watch</code> 第二个参数为 <code>function</code> 时的用法。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.watch(<span class="string">'src/js/**/*.js'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(event);</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">	当修改 src/js/log.js 文件时</span></span><br><span class="line"><span class="comment">    event &#123;</span></span><br><span class="line"><span class="comment">		// 发生改变的类型，不管是添加，改变或是删除</span></span><br><span class="line"><span class="comment">        type: 'changed', </span></span><br><span class="line"><span class="comment">		// 触发事件的文件路径</span></span><br><span class="line"><span class="comment">        path: '/Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js'</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>我们可以利用 <code>event</code> 给到的信息，检测到某个 js 文件被修改时，只编写当前修改的 js 文件。</p>
<p>可以利用 <code>gulp-watch-path</code> 配合 <code>event</code> 获取编译路径和输出路径。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> watchPath = <span class="built_in">require</span>(<span class="string">'gulp-watch-path'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'watchjs'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/js/**/*.js'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/'</span>, <span class="string">'dist/'</span>)</span><br><span class="line">        <span class="comment">/*</span></span><br><span class="line"><span class="comment">        paths</span></span><br><span class="line"><span class="comment">            &#123; srcPath: 'src/js/log.js',</span></span><br><span class="line"><span class="comment">              srcDir: 'src/js/',</span></span><br><span class="line"><span class="comment">              distPath: 'dist/js/log.js',</span></span><br><span class="line"><span class="comment">              distDir: 'dist/js/',</span></span><br><span class="line"><span class="comment">              srcFilename: 'log.js',</span></span><br><span class="line"><span class="comment">              distFilename: 'log.js' &#125;</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        gulp.src(paths.srcPath)</span><br><span class="line">            .pipe(uglify())</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watchjs'</span>])</span><br></pre></td></tr></table></figure>
<p><a href="https://github.com/nimojs/gulp-book/tree/master/demo/chapter7/use-gulp-watch-path.js" target="_blank" rel="noopener">use-gulp-watch-path 完整代码</a></p>
<h4 id="7-5-3-watchPath-event-search-replace-distExt"><a href="#7-5-3-watchPath-event-search-replace-distExt" class="headerlink" title="7.5.3 watchPath(event, search, replace, distExt)"></a>7.5.3 watchPath(event, search, replace, distExt)</h4><hr>
<table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>event</td>
<td><code>gulp.watch</code> 回调函数的 <code>event</code></td>
</tr>
<tr>
<td>search</td>
<td>需要被替换的起始字符串</td>
</tr>
<tr>
<td>replace</td>
<td>第三个参数是新的的字符串</td>
</tr>
<tr>
<td>distExt</td>
<td>扩展名(非必填)</td>
</tr>
</tbody>
</table>
<p>此时编辑 <a href="https://github.com/nimojs/gulp-demo/blob/master/src/js/log.js" target="_blank" rel="noopener">src/js/log.js</a> 文件并保存，命令行会出现消息，表示检测到 <code>src/js/log.js</code> 文件修改后只重新编译 <code>log.js</code>。</p>
<figure class="highlight ruby"><table><tr><td class="code"><pre><span class="line">[<span class="number">21</span><span class="symbol">:</span><span class="number">47</span><span class="symbol">:</span><span class="number">25</span>] changed src/js/log.js</span><br><span class="line">[<span class="number">21</span><span class="symbol">:</span><span class="number">47</span><span class="symbol">:</span><span class="number">25</span>] Dist dist/js/log.js</span><br></pre></td></tr></table></figure>
<p>你可以访问 <a href="https://github.com/nimojs/gulp-watch-path" target="_blank" rel="noopener">gulp-watch-path</a> 了解更多。</p>
<h4 id="7-5-4-stream-combiner2"><a href="#7-5-4-stream-combiner2" class="headerlink" title="7.5.4 stream-combiner2"></a>7.5.4 stream-combiner2</h4><hr>
<p>编辑 <code>log.js</code> 文件时，如果文件中有 js 语法错误时，gulp 会终止运行并报错。</p>
<p>当 log.js 缺少 <code>)</code><br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">log(<span class="string">'gulp-book'</span></span><br></pre></td></tr></table></figure></p>
<p>并保存文件时出现如下错误，但是错误信息不全面。而且还会让 gulp 停止运行。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">events.js:85</span><br><span class="line">      throw er; // Unhandled &apos;error&apos; event</span><br><span class="line">            ^</span><br><span class="line">Error</span><br><span class="line">    at new JS_Parse_Error (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:189:18)</span><br><span class="line">...</span><br><span class="line">...</span><br><span class="line">js_error (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-</span><br><span class="line">-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1165:20)</span><br><span class="line">    at maybe_unary (/Users/nimojs/Documents/code/gulp-book/demo/chapter7/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1328:19)</span><br></pre></td></tr></table></figure>
<p>应对这种情况，我们可以使用 <a href="https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md" target="_blank" rel="noopener">Combining streams to handle errors</a> 文档中推荐的 <a href="https://github.com/substack/stream-combiner2" target="_blank" rel="noopener">stream-combiner2</a>  捕获错误信息。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> handleError = <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> colors = gutil.colors;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'\n'</span>)</span><br><span class="line">    gutil.log(colors.red(<span class="string">'Error!'</span>))</span><br><span class="line">    gutil.log(<span class="string">'fileName: '</span> + colors.red(err.fileName))</span><br><span class="line">    gutil.log(<span class="string">'lineNumber: '</span> + colors.red(err.lineNumber))</span><br><span class="line">    gutil.log(<span class="string">'message: '</span> + err.message)</span><br><span class="line">    gutil.log(<span class="string">'plugin: '</span> + colors.yellow(err.plugin))</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> combiner = <span class="built_in">require</span>(<span class="string">'stream-combiner2'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'watchjs'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/js/**/*.js'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/'</span>, <span class="string">'dist/'</span>)</span><br><span class="line">        <span class="comment">/*</span></span><br><span class="line"><span class="comment">        paths</span></span><br><span class="line"><span class="comment">            &#123; srcPath: 'src/js/log.js',</span></span><br><span class="line"><span class="comment">              srcDir: 'src/js/',</span></span><br><span class="line"><span class="comment">              distPath: 'dist/js/log.js',</span></span><br><span class="line"><span class="comment">              distDir: 'dist/js/',</span></span><br><span class="line"><span class="comment">              srcFilename: 'log.js',</span></span><br><span class="line"><span class="comment">              distFilename: 'log.js' &#125;</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">        gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> combined = combiner.obj([</span><br><span class="line">            gulp.src(paths.srcPath),</span><br><span class="line">            uglify(),</span><br><span class="line">            gulp.dest(paths.distDir)</span><br><span class="line">        ])</span><br><span class="line"></span><br><span class="line">        combined.on(<span class="string">'error'</span>, handleError)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>此时当编译错误的语法时，命令行会出现错误提示。而且不会让 gulp 停止运行。</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">changed:src/js/log.js</span><br><span class="line">dist:dist/js/log.js</span><br><span class="line">--------------</span><br><span class="line">Error!</span><br><span class="line">fileName: /Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js</span><br><span class="line">lineNumber: 7</span><br><span class="line">message: /Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js: Unexpected token eof «undefined», expected punc «,»</span><br><span class="line">plugin: gulp-uglify</span><br></pre></td></tr></table></figure>
<h4 id="7-5-5-gulp-sourcemaps"><a href="#7-5-5-gulp-sourcemaps" class="headerlink" title="7.5.5 gulp-sourcemaps"></a>7.5.5 gulp-sourcemaps</h4><hr>
<p>JS 压缩前和压缩后比较<br><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 压缩前</span></span><br><span class="line"><span class="keyword">var</span> log = <span class="function"><span class="keyword">function</span> (<span class="params">msg</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'--------'</span>);</span><br><span class="line">    <span class="built_in">console</span>.log(msg)</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'--------'</span>);</span><br><span class="line">&#125;</span><br><span class="line">log(&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;)</span><br><span class="line">log(<span class="string">'gulp-book'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩后</span></span><br><span class="line"><span class="keyword">var</span> log=<span class="function"><span class="keyword">function</span>(<span class="params">o</span>)</span>&#123;<span class="built_in">console</span>.log(<span class="string">"--------"</span>),<span class="built_in">console</span>.log(o),<span class="built_in">console</span>.log(<span class="string">"--------"</span>)&#125;;log(&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;),log(<span class="string">"gulp-book"</span>);</span><br></pre></td></tr></table></figure></p>
<p>压缩后的代码不存在换行符和空白符，导致出错后很难调试，好在我们可以使用 <a href="http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html" target="_blank" rel="noopener">sourcemap</a> 帮助调试</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> sourcemaps = <span class="built_in">require</span>(<span class="string">'gulp-sourcemaps'</span>)</span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="keyword">var</span> combined = combiner.obj([</span><br><span class="line">    gulp.src(paths.srcPath),</span><br><span class="line">    sourcemaps.init(),</span><br><span class="line">    uglify(),</span><br><span class="line">    sourcemaps.write(<span class="string">'./'</span>),</span><br><span class="line">    gulp.dest(paths.distDir)</span><br><span class="line">])</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>
<p>此时 <code>dist/js/</code> 中也会生成对应的 <code>.map</code> 文件，以便使用 Chrome 控制台调试代码 <a href="https://github.com/nimojs/gulp-demo/blob/master/src/js/" target="_blank" rel="noopener">在线文件示例：src/js/</a></p>
<hr>
<p>至此，我们完成了检测文件修改后压缩 JS 的 gulp 任务配置。</p>
<p>有时我们也需要一次编译所有 js 文件。可以配置 <code>uglifyjs</code> 任务。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'uglifyjs'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> combined = combiner.obj([</span><br><span class="line">        gulp.src(<span class="string">'src/js/**/*.js'</span>),</span><br><span class="line">        sourcemaps.init(),</span><br><span class="line">        uglify(),</span><br><span class="line">        sourcemaps.write(<span class="string">'./'</span>),</span><br><span class="line">        gulp.dest(<span class="string">'dist/js/'</span>)</span><br><span class="line">    ])</span><br><span class="line">    combined.on(<span class="string">'error'</span>, handleError)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在命令行输入 <code>gulp uglifyjs</code> 以压缩 <code>src/js/</code> 下的所有 js 文件。</p>
<h3 id="7-6-配置-CSS-任务"><a href="#7-6-配置-CSS-任务" class="headerlink" title="7.6 配置 CSS 任务"></a>7.6 配置 CSS 任务</h3><hr>
<p>有时我们不想使用 LESS 或 SASS而是直接编写 CSS，但我们需要压缩 CSS 以提高页面加载速度。</p>
<h4 id="7-6-1-gulp-minify-css"><a href="#7-6-1-gulp-minify-css" class="headerlink" title="7.6.1 gulp-minify-css"></a>7.6.1 gulp-minify-css</h4><hr>
<p>按照本章中压缩 JS 的方式，先编写 <code>watchcss</code> 任务</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> minifycss = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'watchcss'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/css/**/*.css'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/'</span>, <span class="string">'dist/'</span>)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        gulp.src(paths.srcPath)</span><br><span class="line">            .pipe(sourcemaps.init())</span><br><span class="line">            .pipe(minifycss())</span><br><span class="line">            .pipe(sourcemaps.write(<span class="string">'./'</span>))</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watchjs'</span>,<span class="string">'watchcss'</span>])</span><br></pre></td></tr></table></figure>
<h4 id="7-6-2-gulp-autoprefixer"><a href="#7-6-2-gulp-autoprefixer" class="headerlink" title="7.6.2 gulp-autoprefixer"></a>7.6.2 gulp-autoprefixer</h4><p>autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。<br>通过示例帮助理解 </p>
<p>autoprefixer 处理前：<br><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.demo</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>:flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>autoprefixer 处理后：<br><figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.demo</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>:-webkit-flex;</span><br><span class="line">    <span class="attribute">display</span>:-ms-flexbox;</span><br><span class="line">    <span class="attribute">display</span>:flex;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>你只需要关心编写标准语法的 css，autoprefixer 会自动补全。</p>
<p>在 watchcss 任务中加入 autoprefixer:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'watchcss'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/css/**/*.css'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/'</span>, <span class="string">'dist/'</span>)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        gulp.src(paths.srcPath)</span><br><span class="line">            .pipe(sourcemaps.init())</span><br><span class="line">            .pipe(autoprefixer(&#123;</span><br><span class="line">              browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">            &#125;))</span><br><span class="line">            .pipe(minifycss())</span><br><span class="line">            .pipe(sourcemaps.write(<span class="string">'./'</span>))</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>更多 autoprefixer 参数请查看 <a href="https://github.com/sindresorhus/gulp-autoprefixer" target="_blank" rel="noopener">gulp-autoprefixer</a></p>
<p>有时我们也需要一次编译所有 css 文件。可以配置 <code>minifyss</code> 任务。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'minifycss'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.src(<span class="string">'src/css/**/*.css'</span>)</span><br><span class="line">        .pipe(sourcemaps.init())</span><br><span class="line">        .pipe(autoprefixer(&#123;</span><br><span class="line">          browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(minifycss())</span><br><span class="line">        .pipe(sourcemaps.write(<span class="string">'./'</span>))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/css/'</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在命令行输入 <code>gulp minifyss</code> 以压缩 <code>src/css/</code> 下的所有 .css 文件并复制到 <code>dist/css</code> 目录下</p>
<h3 id="7-7-配置-Less-任务"><a href="#7-7-配置-Less-任务" class="headerlink" title="7.7 配置 Less 任务"></a>7.7 配置 Less 任务</h3><hr>
<ul>
<li>参考配置 JavaScript 任务的方式配置 less 任务</li>
</ul>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> less = <span class="built_in">require</span>(<span class="string">'gulp-less'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'watchless'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/less/**/*.less'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/less/'</span>, <span class="string">'dist/css/'</span>)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line">        <span class="keyword">var</span> combined = combiner.obj([</span><br><span class="line">            gulp.src(paths.srcPath),</span><br><span class="line">            sourcemaps.init(),</span><br><span class="line">            autoprefixer(&#123;</span><br><span class="line">              browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">            &#125;),</span><br><span class="line">            less(),</span><br><span class="line">            minifycss(),</span><br><span class="line">            sourcemaps.write(<span class="string">'./'</span>),</span><br><span class="line">            gulp.dest(paths.distDir)</span><br><span class="line">        ])</span><br><span class="line">        combined.on(<span class="string">'error'</span>, handleError)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'lesscss'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> combined = combiner.obj([</span><br><span class="line">            gulp.src(<span class="string">'src/less/**/*.less'</span>),</span><br><span class="line">            sourcemaps.init(),</span><br><span class="line">            autoprefixer(&#123;</span><br><span class="line">              browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">            &#125;),</span><br><span class="line">            less(),</span><br><span class="line">            minifycss(),</span><br><span class="line">            sourcemaps.write(<span class="string">'./'</span>),</span><br><span class="line">            gulp.dest(<span class="string">'dist/css/'</span>)</span><br><span class="line">        ])</span><br><span class="line">    combined.on(<span class="string">'error'</span>, handleError)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watchjs'</span>, <span class="string">'watchcss'</span>, <span class="string">'watchless'</span>])</span><br></pre></td></tr></table></figure>
<h3 id="7-8-配置-Sass-任务"><a href="#7-8-配置-Sass-任务" class="headerlink" title="7.8 配置 Sass 任务"></a>7.8 配置 Sass 任务</h3><hr>
<p>参考配置 JavaScript 任务的方式配置 Sass 任务</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'watchsass'</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/sass/**/*'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event, <span class="string">'src/sass/'</span>, <span class="string">'dist/css/'</span>)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line">        sass(paths.srcPath)</span><br><span class="line">            .on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</span><br><span class="line">                <span class="built_in">console</span>.error(<span class="string">'Error!'</span>, err.message);</span><br><span class="line">            &#125;)</span><br><span class="line">            .pipe(sourcemaps.init())</span><br><span class="line">            .pipe(minifycss())</span><br><span class="line">            .pipe(autoprefixer(&#123;</span><br><span class="line">              browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">            &#125;))</span><br><span class="line">            .pipe(sourcemaps.write(<span class="string">'./'</span>))</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'sasscss'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        sass(<span class="string">'src/sass/'</span>)</span><br><span class="line">        .on(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.error(<span class="string">'Error!'</span>, err.message);</span><br><span class="line">        &#125;)</span><br><span class="line">        .pipe(sourcemaps.init())</span><br><span class="line">        .pipe(minifycss())</span><br><span class="line">        .pipe(autoprefixer(&#123;</span><br><span class="line">          browsers: <span class="string">'last 2 versions'</span></span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(sourcemaps.write(<span class="string">'./'</span>))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/css'</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watchjs'</span>, <span class="string">'watchcss'</span>, <span class="string">'watchless'</span>, <span class="string">'watchsass'</span>, <span class="string">'watchsass'</span>])</span><br></pre></td></tr></table></figure>
<h3 id="7-9-配置-image-任务"><a href="#7-9-配置-image-任务" class="headerlink" title="7.9 配置 image 任务"></a>7.9 配置 image 任务</h3><hr>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> imagemin = <span class="built_in">require</span>(<span class="string">'gulp-imagemin'</span>)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'watchimage'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/images/**/*'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event,<span class="string">'src/'</span>,<span class="string">'dist/'</span>)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        gulp.src(paths.srcPath)</span><br><span class="line">            .pipe(imagemin(&#123;</span><br><span class="line">                progressive: <span class="literal">true</span></span><br><span class="line">            &#125;))</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'image'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.src(<span class="string">'src/images/**/*'</span>)</span><br><span class="line">        .pipe(imagemin(&#123;</span><br><span class="line">            progressive: <span class="literal">true</span></span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/images'</span>))</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="7-10-配置文件复制任务"><a href="#7-10-配置文件复制任务" class="headerlink" title="7.10 配置文件复制任务"></a>7.10 配置文件复制任务</h3><hr>
<p>复制 <code>src/fonts/</code> 文件到 <code>dist/</code> 中</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gulp.task(<span class="string">'watchcopy'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.watch(<span class="string">'src/fonts/**/*'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> paths = watchPath(event)</span><br><span class="line"></span><br><span class="line">		gutil.log(gutil.colors.green(event.type) + <span class="string">' '</span> + paths.srcPath)</span><br><span class="line">        gutil.log(<span class="string">'Dist '</span> + paths.distPath)</span><br><span class="line"></span><br><span class="line">        gulp.src(paths.srcPath)</span><br><span class="line">            .pipe(gulp.dest(paths.distDir))</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'copy'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    gulp.src(<span class="string">'src/fonts/**/*'</span>)</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/fonts/'</span>))</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'watchjs'</span>, <span class="string">'watchcss'</span>, <span class="string">'watchless'</span>, <span class="string">'watchsass'</span>, <span class="string">'watchimage'</span>, <span class="string">'watchcopy'</span>])</span><br></pre></td></tr></table></figure>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2017/01/12/js-animate/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2017/01/13/webpack/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
